<template>
  <el-card class="content small-padding-card">
    <text-tree
      :tree="treeData"
      @node-click="handleNodeClick"
      node-key="id"
      :defaultExpandKeys="defaultExpandKeys"
      :current-node-key="currentNodeKey"                                               
    >
    </text-tree>
  </el-card>
</template>
<script>
import Axios from "axios";
import TextTree from "~/components/TextTree";
// 表面位移  北斗站
import SurfaceDisplacement from "~/views/monitor-control/online-monitoring/SurfaceDisplacement";
// 降雨量
import RainFall from "../../views/monitor-control/online-monitoring/RainFall";
// 内部位移
import DeepDisplacement from "../monitor-control/online-monitoring/DeepDisplacement";
// 库水位
import Water from "../monitor-control/online-monitoring/Water";
// 浸润线
import SeepageLine from "../monitor-control/online-monitoring/SeepageLine";
// 最小干滩长度
import MinDryBeachLength from "../monitor-control/online-monitoring/MinDryBeachLength";
// 水质水量监测
import WaterMonitor from "../monitor-control/online-monitoring/WaterMonitor";
// 短临天气预测
import WeatherForecast from "../monitor-control/online-monitoring/WeatherForecast";
import {
  getMonitorTypeList,
  getStationInforPage,
  getMonitorPointList,
} from "../../api/api";
export default {
  name: "OnlineMonitoring",
  components: {
    TextTree, //注意，此处并不需要引入SurfaceDisplacement组件
  },
  props: {},
  data() {
    return {
      treeData: [],
      defaultExpandKeys: [1],
      currentNodeKey: "103",
    };
  },
  methods: {
    handleNodeClick: function (data) {
      console.log(data.id);
      window.sessionStorage.setItem("treeon", data);
    },
    async initData() {
      let temp;
      await Axios({
        url:
          "/leftMenuTree/getLeftMenuTree/" +
          `${sessionStorage.getItem("unitId")}`,
      }).then((res) => {
        console.log(res);
        var list = res.data.parameter.tailingPondList;
        for (let i = 0; i < list.length; i++) {
          for (let key in list[i])
            key === "tailingName"
              ? (list[i].label = list[i][key]) &&
                (list[i].uu = require("../../assets/icon/money.svg"))
              : null;
          list[i].children = list[i].monitorTypeList;
          for (let k = 0; k < list[i].children.length; k++) {
            for (let key in list[i].children[k]) {
              key === "name"
                ? (list[i].children[k].label = list[i].children[k][key])
                : null;
              list[i].children[k].uu = require("../../assets/icon/file.svg");
            }
            list[i].children[k].children = list[i].children[k].monitorPointList;
            for (let j = 0; j < list[i].children[k].children.length; j++) {
              for (let key in list[i].children[k].children[j]) {
                key === "name"
                  ? (list[i].children[k].children[j].label =
                      list[i].children[k].children[j].name)
                  : null;
                switch (list[i].children[k].id) {
                  case 1:
                    list[i].children[k].children[
                      j
                    ].component = MinDryBeachLength;
                    list[i].children[k].children[
                      j
                    ].uu = require("../../assets/icon/gt.svg");
                    break;
                  case 2:
                    list[i].children[k].children[j].component = Water;
                    list[i].children[k].children[
                      j
                    ].uu = require("../../assets/icon/ksw.svg");
                    break;
                  case 3:
                    list[i].children[k].children[
                      j
                    ].component = SurfaceDisplacement;
                    list[i].children[k].children[
                      j
                    ].uu = require("../../assets/icon/bmwy.svg");
                    break;
                  case 4:
                    list[i].children[k].children[
                      j
                    ].component = DeepDisplacement;
                    list[i].children[k].children[
                      j
                    ].uu = require("../../assets/icon/nbwy.svg");
                    break;
                  case 5:
                    list[i].children[k].children[j].component = SeepageLine;
                    list[i].children[k].children[
                      j
                    ].uu = require("../../assets/icon/jrx.svg");
                    break;
                  case 6:
                    list[i].children[k].children[j].component = RainFall;
                    list[i].children[k].children[
                      j
                    ].uu = require("../../assets/icon/jsl.svg");
                    break;
                }
              }
            }
          }
        }
        temp = list;
      });
      this.treeData = temp;
      return temp;
    },
  },
  created() {
    if (window.sessionStorage.getItem("indextreeon") != null) {
      this.defaultExpandKeys = [
        Number(window.sessionStorage.getItem("indextreeon")),
      ];
      console.log(this.defaultExpandKeys);
    }
    this.initData().then((res) => {});
  },
};
</script>

<style scoped>
.content {
  /* margin-top: 8px; */
  display: flex;
}
.small-padding-card  {
  width: 100%;
}
.small-padding-card >>> .el-card__body {
  width: 97%;
}
</style>